const overlay = document.getElementById('replyOverlay');
const input = document.getElementById('replyInput');
//获取到评论区的头像,然后将用户信息赋值给对应的信
const avatar = document.querySelector('.comment-post').querySelector('.avatar')
const userInfo = JSON.parse(localStorage.getItem('userInfo'))
console.log('userInfo.avatar', userInfo.avatar)
avatar.src = userInfo.avatar
let replyType = 0
//这样就可以在那个位置进行定位了
let replayButton

/* 点击任意“回复” */
document.addEventListener('click', e => {
    if (!e.target.matches('.replyButton')) return;

    //这里赋值是哪种类型的回复
    replyType = Number(e.target.dataset.id)
    replayButton = e.target

    //获取到对应的信息进行拼接数据
    const name = e.target.closest('.comment-item').querySelector('.name').textContent;
    overlay.querySelector('.reply-name').textContent = name;
    overlay.classList.add('show');
    input.focus();
});

/* 三种关闭 */
overlay.addEventListener('click', e => {
    if (e.target === overlay || e.target.matches('.reply-send')) {
        overlay.classList.remove('show');
        if (e.target.matches('.reply-send')) {
            //回复按钮在这里触发，所以这里获取数据并渲染上去
            //这里可以进行判断回复的类型，比如第一种类型是对第一层的评论进行回复
            if (replyType === 1) {
                //其实这里还需要获取到回复评论的id，这个怎么区渲染呢？怎么去得到对应的id，同样也是将评论id渲染到对应的dataset中，然后进行获取
                //模拟一次回复评论的渲染页面
                const parentDiv = replayButton.parentElement.parentElement.querySelector('.sub-comment')
                //自动选择第一个进行渲染
                const copyReplyDiv = parentDiv.querySelector('.comment-item').cloneNode(true)
                copyReplyDiv.querySelector('.avatar').src = userInfo.avatar
                copyReplyDiv.querySelector('.comment-content').innerHTML = overlay.querySelector('textarea').value
                //这里将获取到的id进行赋值
                copyReplyDiv.querySelector('.comment-content').dataset.id = 99
                console.log('parentDiv', parentDiv)
                console.log(copyReplyDiv)
                parentDiv.appendChild(copyReplyDiv)
                
            } else if (replyType === 2) {
                //当前回复的是第二层评论
                //接着就是多了一个步骤，将回复评论的id发送给后台进行处理
                const replyName = replayButton.parentElement.parentElement.querySelector('.name').innerHTML
                const parentDiv = replayButton.parentElement.parentElement.parentElement.parentElement
                console.log(replyName)
                const copyReplyDiv = replayButton.parentElement.parentElement.parentElement.cloneNode(true)
                copyReplyDiv.querySelector('.avatar').src = userInfo.avatar
                copyReplyDiv.querySelector('.comment-content').innerHTML = overlay.querySelector('textarea').value
                copyReplyDiv.querySelector('.reply').innerHTML = `@${replyName}`
                copyReplyDiv.querySelector('.comment-content').dataset.id = 99
                console.log(copyReplyDiv)
                parentDiv.appendChild(copyReplyDiv)
                console.log(2)
            }
        };
    }
});

/* 表情点击插入 */
document.querySelector('.reply-emo').addEventListener('click', e => {
    const emoji = e.target.closest('span')?.textContent;
    if (!emoji) return;
    const tx = document.getElementById('replyInput');
    const [start, end] = [tx.selectionStart, tx.selectionEnd];
    tx.setRangeText(emoji, start, end, 'end');   // 原生 API，IE11+
    tx.focus();
    tx.setSelectionRange(start + emoji.length, start + emoji.length);
});




//重新获取数据


//获取到windows的ulr参数
const params = new URLSearchParams(location.search);
const id = params.get('id') // 123
//后期文章分页之后可以使用接口查询/article?id="" 直接进行查询而不是从localstorage中获取数据，因为现在是模拟数据
//通过查询接口api可以快速查询，这里可以通过接口实现访问数据
let data = JSON.parse(localStorage.getItem('data'))
let article
data.forEach(item => {
    if (item.id.toString() === id.toString()) {
        article = item
    }
})


//开始获取到结点进行渲染
const articleDiv = document.querySelector('.article')
articleDiv.querySelector('.article-title').innerHTML = article.title
articleDiv.querySelector('.article-meta').children[0].innerHTML = article.time
articleDiv.querySelector('.article-meta').children[1].innerHTML = article.user.name
articleDiv.querySelector('.article-content').children[0].innerHTML = article.content


//获取评论区的数据
const commentList = article.commentList
console.log('commentList', commentList)
//一级评论
const commentListDiv = document.querySelector('.comment-list')
const firstCommentDiv = commentListDiv.querySelector('.comment-item')

console.log('commentListDiv', commentListDiv)
console.log('firstCommentDiv', firstCommentDiv)

//进行一级评论的渲染，这种一般就是先一级然后二级渲染
//一级评论内容渲染
if (commentList.length === 0) {
    alert('没有评论区内容')
}


commentList.forEach(item => {
    let copyFirstCommentDiv = firstCommentDiv.cloneNode(true)


    console.log('copyFirstCommentDiv', copyFirstCommentDiv)
    copyFirstCommentDiv.children[0].src = item.user.avatar
    copyFirstCommentDiv.children[1].children[0].querySelector('.name').innerHTML = item.user.name
    copyFirstCommentDiv.children[1].querySelector('.comment-content').innerHTML = item.content
    //这里进行赋值
    copyFirstCommentDiv.children[1].querySelector('.comment-content').dataset.id = item.id

    //二级评论的list列表dom
    const secondCommentList = copyFirstCommentDiv.querySelector('.sub-comment')

    //二级评论,最多只有二级评论

    //一级有回复功能，当rootId为这个主评论的id，而且replyId为0的时候，表示该评论为这个主要评论下的普通评论
    item.children.forEach(secondItem => {
        //筛选出该主评论下的所有rootId一样的子评论

        console.log('main_comment_Id', item.id.toString())
        console.log('secondItem_rootId', secondItem.rootId.toString())
        console.log('secondItem_replyId', secondItem.replyId.toString())
        console.log(secondItem.replyId.toString())


        //声明一个变量来存储复制结点
        const copyedDiv = secondCommentList.children[0].cloneNode(true)
        // secondCommentList.children[0].remove()

        //以下是针对rootId一样的子评论进行渲染，因为后盾返回的是树结构，所以这里直接进行渲染就可以了，前提是rootId一样

        //针对二级的普通评论，没有回复二级评论下的任何评论，只是回复一级评论，所以这里的条件多了一个replyId为0
        if (item.id.toString() === secondItem.rootId.toString() && secondItem.replyId == 0) {
            console.log('item.id', item.id)
            console.log(1)
            //replyId 和 其他进行对比，回复id一定是主要评论下的次级id,如果replyId表示的是主要评论id，name
            // if(secondItem)

            // //可以将二级评论渲染到该(id为1的情况下)一级评论下
            // console.log('secondItem',secondItem)
            let CopysecondCommentDiv = copyedDiv.cloneNode(true)
            // //开始渲染,判断是否是当前主要评论的二级评论
            CopysecondCommentDiv.querySelector('.avatar').src = secondItem.user.avatar
            CopysecondCommentDiv.querySelector('.name').innerHTML = secondItem.user.name
            CopysecondCommentDiv.querySelector('.comment-content').innerHTML = secondItem.content
            //赋值id
            CopysecondCommentDiv.querySelector('.comment-content').dataset.id = secondItem.id
            console.log('CopysecondCommentDiv', CopysecondCommentDiv)
            secondCommentList.appendChild(CopysecondCommentDiv)
            secondCommentList.children[0].remove()
        }




        //主要针对二级评论下的相互评论，这里的前提是rootId一样
        if (item.id.toString() === secondItem.rootId.toString()) {
            console.log('secondCommentList.children[0]', secondCommentList)
            console.log('item.id', item.id)
            //现在需要用当前的replyId寻找到用户中的信息然后拼接到用户名字之后，这就需要调用接口findUser，后期可以改一下，现在就可以调用setItem进行浏览
            let CopysecondCommentReplyDiv = copyedDiv.cloneNode(true)
            //思路是正确的，这里需要找到replyed对应的评论secondItem，后期接口返回会更换
            item.children.forEach(secondItemItem => {
                //这里将评论的内容分为两个，一个是对主评论的二级评论，一个是在主评论下的相互评论，下面这个就是相互评论
                if (secondItemItem.id.toString() === secondItem.replyId.toString()) {
                    //这里应该交给后端来处理，就是要返回一个评论区回复id对应的用户信息并拼接到每个评论区的item
                    CopysecondCommentReplyDiv.querySelector('.avatar').src = secondItem.user.avatar
                    CopysecondCommentReplyDiv.querySelector('.name').innerHTML = secondItem.user.name
                    CopysecondCommentReplyDiv.querySelector('.reply').innerHTML = `@${secondItem.replyUser.name}`
                    CopysecondCommentReplyDiv.querySelector('.comment-content').innerHTML = secondItem.content
                    //赋值id
                    CopysecondCommentReplyDiv.querySelector('.comment-content').dataset.id = secondItem.id
                    console.log('CopysecondCommentReplyDiv', CopysecondCommentReplyDiv)
                    secondCommentList.appendChild(CopysecondCommentReplyDiv)
                }
            })
        }
    })

    //将复制的结点放到对应的一级列表数据
    commentListDiv.appendChild(copyFirstCommentDiv)
    //删除第一个之后页面进行重新渲染，一般问题出现在页面的chidlren[1].remove()，这个可能会导致问题出现
    commentListDiv.children[0].remove()
})





function todoComment() {
    console.log(2332)
    const commentList = document.querySelector('.comment-list')
    const commentListItem = document.querySelector('.comment-item')
    let copyItem = commentListItem.cloneNode(true)
    //获取当前用户状态
    console.log(userInfo)
    copyItem.querySelector('.avatar').src = userInfo.avatar
    const value = document.querySelector('.post-box').querySelector('textarea').value
    if (value.trim() === '') {
        alert('请输入内容')
        return
    }
    copyItem.querySelector('.comment-content').innerHTML = value
    //这里将返回的id值进行赋值
    copyItem.querySelector('.comment-content').dataset.id = 99
    copyItem.querySelector('.sub-comment').innerHTML = '' //删除结点就要考虑这个结点之后的一级回复不能克隆结点或者是找不到结点 重要！！！
    console.log('copyItem', copyItem)
    commentList.appendChild(copyItem)
}